<template>
  <el-container class="detail-container">
    <scroll-bar :callback="width => scrollProgress = width" />
    <back-top v-if="itIsTime" />

    <template v-if="blogDetail.id">
      <el-main>
        <h2 class="blog-title">{{blogDetail.title}}</h2>
        <article-view :code="blogDetail.html" />
      </el-main>

      <el-aside width="240px">
        <div class="word-meta-wrap">
          <detail-author :blog-user="blogDetail.user" />
          <article-tag :word-tags="blogDetail" />
          <article-time :word-time="blogDetail" />
          <article-detail :word-like="blogDetail" @like="handleLikeWord" />
          <template v-if="showArtivleOperation">
            <article-editor :word-info="blogDetail" :user-info="loginUser" />
          </template>
        </div>
      </el-aside>
    </template>
    <div v-else class="loading-icon-layer flex-center">
      <span class="el-icon-loading"></span>
    </div>
  </el-container>
</template>

<script>
import API from '~/interface/Word';
import BackTop from '~/components/public/BackTop';
import ScrollBar from '~/components/public/ScrollBar';
import DetailAuthor from '~/components/detail/Author';
import ArticleTag from '~/components/detail/ArticleTag';
import ArticleTime from '~/components/detail/ArticleTime';
import ArticleView from '~/components/detail/ArticleView';
import ArticleDetail from '~/components/detail/ArticleDetail';

export default {
  head() {
    return {
      title: this.pageTitle
    }
  },

  data() {
    return {
      loginUser: {}, // 登录的用户
      blogDetail: {}, // 文章详情
      scrollProgress: 0, // 滚动的百分比
      showArtivleOperation: false, // 显示操作文章模块
    }
  },

  components: {
    BackTop,
    ScrollBar,
    DetailAuthor,
    ArticleTag,
    ArticleDetail,
    ArticleTime,
    ArticleView,
    ArticleEditor: () => import('~/components/detail/ArticleOperation')
  },

  computed: {
    itIsTime() {
      return this.scrollProgress >= 20
    },
    pageTitle() {
      return (this.blogDetail && this.blogDetail.title) || 'rabbit-pie'
    }
  },

  created() {
    // if (!process.server) {
    this.getWordDetail();
    // }
  },

  methods: {
    async getWordDetail() {
      let id = this.$route.params.id;
      await API.getWordDetail(id).then(data => {
        if (data && data.id) {
          this.blogDetail = data;
        };
      });

      this.$utils.userType().then(data => {
        const word = this.blogDetail.user;

        this.loginUser = data;
        // 当作者或者管理员访问文章时显示
        if (data.id === word.uid || data.scope !== 'USER') {
          this.showArtivleOperation = true;
        }
      });
    },
    handleLikeWord() {
      const data = {
        type: 'article',
        target_id: this.blogDetail.id
      };

      API.postLikeWord(data).then(res => {
        this.blogDetail.likes.user_like = true;
        this.blogDetail.likes.count += 1;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  position: relative;

  & /deep/ .el-main {
    margin-right: 10px;
    background-color: #fff;

    .blog-title {
      font-size: 30px;
      font-weight: bold;
      color: #000;
    }
  }

  /deep/ .el-aside {
    position: relative;
    overflow: initial;

    .word-meta-wrap {
      position: relative;
    }
  }

  .loading-icon-layer {
    width: 100%;
    height: 200px;
    font-size: 35px;
    color: var(--theme);
  }
}
</style>